<template>
  <view class="container" :style="{minHeight: screenHeight + 'px'}">
    <!-- 分类选项卡样式升级 -->
    <view class="category-tabs">
      <u-subsection 
        :list="list" 
        v-model="current" 
        @change="changes" 
        mode="button" 
        active-color="#fff"
        inactive-color="#3B71E8"
        :button-color="['#3B71E8', '#2B59C4']"
        bg-color="#f8f9fa"
        height="80"
        :animation="true"
        fontSize="32"
      ></u-subsection>
    </view>

    <!-- 商品列表区域 -->
    <scroll-view 
      class="product-list"
      scroll-y
      refresher-enabled
      @refresherrefresh="onRefresh"
      @scrolltolower="loadMore"
    >
      <view v-if="show" class="list-container">
        <!-- 商品卡片 -->
        <view 
          class="product-card"
          v-for="(item,index) in orderlist" 
          :key="index"
          @click="detail(item.PcTestId)"
          @touchstart="touchStart(index)"
          @touchend="touchEnd(index)"
          :class="{'card-active': activeIndex === index}"
        >
          <!-- 图片区域 -->
          <view class="image-wrapper">
            <image 
              :src="item.PcMainImg" 
              mode="aspectFill"
              class="product-image"
              lazy-load
              fade-show
            ></image>
            <!-- 角标 -->
            <view class="corner-tag" v-if="index < 3">
              <u-icon name="star" color="#fff" size="24"></u-icon>
              <text>人气推荐</text>
            </view>
          </view>

          <!-- 商品信息 -->
          <view class="product-info">
            <view class="title-row">
              <text class="product-title">{{item.PcName}}</text>
              <u-tag 
                :text="item.PcCategory" 
                shape="circle"
                size="mini"
                border-color="#3B71E8"
                color="#3B71E8"
                bg-color="#e9f1ff"
              ></u-tag>
            </view>
            
            <text class="product-desc">{{ item.description }}</text>
            
            <view class="price-section">
              <text class="price-label">优惠价</text>
              <text class="product-price">￥{{ item.PcPrice }}</text>
              <!-- <text class="original-price">￥{{ item.originalPrice || item.PcPrice * 1.2 }}</text> -->
            </view>
          </view>
        </view>
      </view>

      <!-- 空状态优化 -->
      <view class="empty-wrapper" v-else>
        <u-empty 
          text="暂时没有相关商品" 
          mode="list"
          icon="/static/images/empty.png"
          iconSize="300"
        >
          <u-button 
            type="primary"
            shape="circle"
            customStyle="margin-top:40rpx"
            @click="refreshPage"
          >
            <u-icon name="reload" size="28" color="#fff"></u-icon>
            重新加载
          </u-button>
        </u-empty>
      </view>
    </scroll-view>

    <!-- 回到顶部按钮 -->
    <u-back-top :scroll-top="scrollTop" bottom="160"></u-back-top>
  </view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {
				screenHeight: getApp().globalData.screenHeight - 44,
				list: [{}],
				current: 0,
				showdeletes: false,
				deleteshow: false,
				showrefund: false,
				page: 1,
				rows: 20,
				Status: 'all',
				PcCategoryId:"",
				orderlist: [{

					},
					{

					}
				],
				title: '取消预约',
				content: '取消预约之后不可恢复，是否确认',
				deletetitle: '删除预约记录',
				deletecontent: '删除预约记录之后不可恢复，是否确认',
				refundtitle: '退款',
				refundcontent: '退款之后不可恢复，是否确认',
				OrderNumber: '',
				openid: '',
				month: '',
				day: '',
				show: true
			}
		},
		computed: {
			...mapState(['token'], ['userInfo']),
			...mapGetters(['hasLogin', 'getUserInfo'])
		},
		
		onShow() {

			if (this.hasLogin) {

				this.$store.dispatch('getUserInfo');
				this.getlist()
				
				
			} else {
				uni.hideLoading();
				uni.showModal({
					title: '提示',
					content: '登录后才可以操作',
					confirmText: '去登录',
					showCancel: false,
					success: function(res) {
						uni.reLaunch({
							url: '/pages/auth/login'
						})
					}
				});
				return;
			}

		},
		methods: {
			getlist() {
				
				this.$request("Package", "GetPackageCategory", {

				}).then(res => {

					if (res.code == 1) {

						this.list = res.data.map((item, index) => ({
							PcCategoryId: item.PcCategoryId,
							Status: index,
							name: item.PcName

						}));
						
						this.changes(this.current)
					}
				})
			},
			detail(PcTestId) {
				console.log(PcTestId)
				uni.navigateTo({
					url: `/pages/canteen/canteenDetail?PcTestId=${PcTestId}`,
					fail(error) {
						
					}
				})
			},
			getMpWxCode(OrderNumber) {
				uni.login({
					success: async resCode => {
					
						let res = await this.$request('auth', 'getopenid', {
							Code: resCode.code
						});

						if (res.code === 1) {
						
							this.appid = res.data.appid;
							this.sessionkey = res.data.session_key;
							this.openid = res.data.openid;
							this.pays(OrderNumber)
						}
					}
				})
			},

			pays(OrderNumber) {
				console.log(OrderNumber)
				this.$request("pay", "pay", {
					OrderNo: OrderNumber,
					openid: this.openid,
				}).then(resto => {
					console.log(resto)
					if (resto.code == 1) {
						uni.showLoading({
							title: '请等待'
						})
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: resto.data.Timestamp,
							package: resto.data.Package,
							nonceStr: resto.data.Noncestr,
							signType: resto.data.SignType,
							paySign: resto.data.paySign,
							success: (resshree) => {
								console.log(resshree)

								uni.hideLoading();
								this.recordlist()
							},
							fail: (err) => {
								console.log(err)
								uni.hideLoading();
								this.recordlist()
							}

						})

					}

				})

			},
			spliteText(text) {
				return
				// this.day=text.splite("-")[0]


			},
			changes(index) {
				console.log("调用了11111")
				this.current = index
				this.Status = this.list[index].Status
				this.PcCategoryId=this.list[index].PcCategoryId
				console.log(this.PcCategoryId)
				this.recordlist()
			},
			deletesconfirm() {
				//console.log(this.OrderNumber)
				this.$request("Order", "Delete", {
					OrderNo: this.OrderNumber
				}).then(res => {
					if (res.code == 1) {
						this.showdeletes = false
						this.recordlist()
						console.log(res)
					}
				})
			},
			refundconfirm() {
				console.log(this.OrderNumber)
				this.$request("pay", "refund", {
					OrderNo: this.OrderNumber
				}).then(res => {
					if (res.code == 1) {
						this.showrefund = false
						this.recordlist()
						console.log(res)
					}
				})
			},
			confirm() {
				console.log(this.OrderNumber)
				this.$request("Order", "Cancel", {
					OrderNo: this.OrderNumber
				}).then(res => {
					if (res.code == 1) {
						this.deleteshow = false
						console.log(res)
					}
				})
			},
			removes(OrderNumber) {
				this.OrderNumber = OrderNumber
				this.deleteshow = true
			},
			refund(OrderNumber) {
				this.OrderNumber = OrderNumber
				this.showrefund = true
			},
			deletesd(OrderNumber) {
				this.showdeletes = true
				this.OrderNumber = OrderNumber
			},
			formattedDatemonth(VisitDay) {
				const date = new Date(VisitDay);
				return date.toLocaleDateString('zh-CN', {
					month: 'short'
				}).replace(/\//g, '月');
			},
			formattedDateday(VisitDay) {
				const date = new Date(VisitDay);
				return date.toLocaleDateString('zh-CN', {
					day: 'numeric'
				}).replace(/\//g, '月');
			},

			recordlist() {
				uni.showLoading({
					title: '加载中'
				})
				// this.Status = this.list[this.current].Status
				this.$request("Package", "GetPackageTest", {
					PcCategoryId: this.PcCategoryId,
				}).then(res => {


					if (res.code == 1) {
						 console.log(res.data)
						 this.orderlist = res.data
						 console.log(this.orderlist)
						// if (this.orderlist.length != 0) {
						// 	this.show = true
						// 	console.log(res)
							



						// } else {
						// 	this.show = false
						// }

						uni.hideLoading();
						
					}
				})
			}
		}
	}
</script>

<style>
	@import './canteen.css'
</style>
<style scoped>
/* 容器样式 */
.container {
  background: #f8f9fa;
  padding: 20rpx 24rpx 0;
}

/* 分类选项卡 */
.category-tabs {
  background: #fff;
  border-radius: 16rpx;
  padding: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(59,113,232,0.08);
  margin-bottom: 24rpx;
}

/* 商品列表 */
.product-list {
  height: calc(100vh - 160rpx);
}

.list-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
  padding-bottom: 40rpx;
}

/* 商品卡片 */
.product-card {
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 6rpx 24rpx rgba(0,0,0,0.04);
  transition: all 0.3s ease;
}

.card-active {
  transform: translateY(4rpx);
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
}

/* 图片区域 */
.image-wrapper {
  position: relative;
  height: 340rpx;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.corner-tag {
  position: absolute;
  top: 16rpx;
  left: -8rpx;
  background: linear-gradient(135deg, #ff6b6b, #ff4757);
  color: #fff;
  padding: 6rpx 20rpx;
  border-radius: 0 8rpx 8rpx 0;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 8rpx rgba(255,107,107,0.3);
}

/* 商品信息 */
.product-info {
  padding: 24rpx;
}

.title-row {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.product-title {
  font-size: 32rpx;
  color: #1a1a1a;
  font-weight: 600;
  margin-right: 16rpx;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-bottom: 24rpx;
}

/* 价格区域 */
.price-section {
  display: flex;
  align-items: baseline;
}

.price-label {
  font-size: 24rpx;
  color: #999;
  margin-right: 8rpx;
}

.product-price {
  font-size: 36rpx;
  color: #ff4757;
  font-weight: 700;
  margin-right: 12rpx;
}

.original-price {
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
}

/* 空状态优化 */
.empty-wrapper {
  padding-top: 20vh;
}

/* 加载动画 */
@keyframes skeleton-flash {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-item {
  background: linear-gradient(90deg, #f5f5f5 25%, #eee 37%, #f5f5f5 63%);
  background-size: 400% 100%;
  animation: skeleton-flash 1.4s ease infinite;
}
</style>